<template>
  <view class="huodong">
    <view class="block flex-col" @click="$goto('/pages/home/miaosha')">
      <view class="title">秒杀专区</view>

      <view class="flex-row justify-between">
        <view class="item">
          <image class="pic" src="https://picsum.photos/id/453/200/200"></image>
          <view class="sub">懂你所懂</view>
          <view class="title">￥1399</view>
        </view>

        <view class="item">
          <image class="pic" src="https://picsum.photos/id/453/200/200"></image>
          <view class="sub">懂你所懂</view>
          <view class="title">￥1399</view>
        </view>

        <view class="item">
          <image class="pic" src="https://picsum.photos/id/453/200/200"></image>
          <view class="sub">懂你所懂</view>
          <view class="title">￥1399</view>
        </view>
      </view>
    </view>

    <view class="block block-140">
      <view class="item" @click="$goto('/pages/home/haodian')">
        <view class="title">好店推荐</view>
        <view class="sub">快人一步</view>
        <view class="flex-row justify-between" style="width: 300rpx;">
          <image class="pic" src="https://picsum.photos/id/453/200/200"></image>
          <image class="pic" src="https://picsum.photos/id/453/200/200"></image>
        </view>
      </view>

      <view class="item" @click="$goto('/pages/home/youhui')">
        <view class="title">优惠专区</view>
        <view class="sub">优惠享不停</view>
        <view class="flex-row justify-between" style="width: 300rpx;">
          <image class="pic" src="https://picsum.photos/id/453/200/200"></image>
          <image class="pic" src="https://picsum.photos/id/453/200/200"></image>
        </view>
      </view>
    </view>

    <view class="block flex-col" @click="$goto('/pages/home/pintuan')">
      <view class="title">拼团专区</view>

      <view class="flex-row justify-between">
        <view class="item">
          <image class="pic" src="https://picsum.photos/id/453/200/200"></image>
          <view class="sub">懂你所懂</view>
          <view class="title">￥1399</view>
        </view>

        <view class="item">
          <image class="pic" src="https://picsum.photos/id/453/200/200"></image>
          <view class="sub">懂你所懂</view>
          <view class="title">￥1399</view>
        </view>

        <view class="item">
          <image class="pic" src="https://picsum.photos/id/453/200/200"></image>
          <view class="sub">懂你所懂</view>
          <view class="title">￥1399</view>
        </view>
      </view>
    </view>

    <view class="block">
      <view class="item" @click="$goto('/pages/home/tejia')">
        <view class="title">每日特价</view>
        <view class="sub">懂你所懂</view>
        <image class="pic" src="https://picsum.photos/id/453/200/200"></image>
      </view>

      <view class="item" @click="$goto('/pages/home/huiyuan')">
        <view class="title">会员精品</view>
        <view class="sub">好品质新生活</view>
        <image class="pic" src="https://picsum.photos/id/453/200/200"></image>
      </view>

      <view class="item" @click="$goto('/pages/home/xinpin')">
        <view class="title">新品首发</view>
        <view class="sub">胜利吸尘器</view>
        <image class="pic" src="https://picsum.photos/id/453/200/200"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .block {
    background: #fff;
    padding: 24rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 24rpx;
    border-radius: 4rpx;

    --size: 180rpx;

    &.block-140 {
      --size: 140rpx;
    }

    &:nth-of-type(1) {
      border-radius: 24rpx 24rpx 4rpx 4rpx;
    }

    &:nth-last-of-type(1) {
      border-radius: 4rpx 4rpx 24rpx 24rpx;
      margin-bottom: 0;
    }
  }

  .title {
    font-size: 30rpx;
    font-weight: bold;
  }

  .sub {
    font-size: 22rpx;
    color: #C3C3C3;
  }

  .pic {
    width: var(--size);
    height: var(--size);
    object-fit: cover;
    margin: 16rpx 0;
  }
</style>
